<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:300px;height:200px;background: #efefef;position: absolute;left:0;top:0;}
        .box>h2{margin:0;line-height:40px;background: #222;color:#fff;cursor: move;position: absolute;left:0;top:0;width:100%;}
        .box .cont{height:160px;padding-top:40px;}
    </style>
</head>
<body>
    <div class="box">
        <h2>这是标题</h2>
        <div class="cont">
            这是内容
        </div>
    </div>
</body>
<script>
    
    var oh2 = document.querySelector(".box>h2")
    var obox = document.querySelector(".box")

    var clientW = document.documentElement.clientWidth;
    var clientH = document.documentElement.clientHeight;
    var oboxW = obox.offsetWidth;
    var oboxH = obox.offsetHeight;
    var maxL = clientW - oboxW;
    var maxT = clientH - oboxH;


    oh2.addEventListener("mousedown", function(eve){
        var downE = eve || window.event;
        document.addEventListener("mousemove", move)
        function move(eve){
            var moveE = eve || window.event;
            var l = moveE.pageX - downE.offsetX;
            var t = moveE.pageY - downE.offsetY;
            if(l<0) l=0;
            if(t<0) t=0;
            if(l>maxL) l=maxL;
            if(t>maxT) t=maxT;
            // 注意要移动的元素
            obox.style.left = l + "px";
            obox.style.top = t + "px";
        }
        document.addEventListener("mouseup", up);
        function up(){
            document.removeEventListener("mousemove", move);
            document.removeEventListener("mouseup", up);
        }
    })

</script>
</html>